<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<div><label for="">商品价格</label><input type="number" v-model="price"></div>
		<div><label for="">商品数量</label>
			<button v-on:click="count=count-1<0?0:count-1">-</button>
			<span>{{ count }}</span>
			<button v-on:click="handleCountClick">+</button>
		</div>
		<div>总价格：<strong>{{ price * count }}</strong></div>
	</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
	el:'#app',
	data:{
		price:5,
		count:2
	},
	// methods 中的方法不要使用箭头函数，否则绑定的是 Window
      // EcmaScript 6 为对象成员方法提供了一种简写的方式

	methods:{
		// 下面的写法等价于 handleCountClick: function () {}
        // 该语法没有任何特性，只是纯粹的简写了

		handleCountClick(){
			this.count++
		}
	}
})
</script>
</body>
</html>